<template>
  <!-- 字段 -->
  <div style="width: 100%">
    <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
      <el-table-column prop="columnName" label="字段名称" width="180">
        <template slot-scope="{ row }">
          <span v-html="brightenKeyword(row.columnName, listQuery.searchName)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="columnDescription" label="字段描述" width="180">
        <template slot-scope="{ row }">
          <span v-html="brightenKeyword(row.columnDescription, listQuery.searchName)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="assetNumber" label="字段编号" width="180">
        <template slot-scope="{ row }">
          <span v-html="brightenKeyword(row.assetNumber, listQuery.searchName)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="columnType" label="字段类型" sortable width="180">
        <template slot-scope="{ row }">
          <span v-html="brightenKeyword(row.columnType, listQuery.searchName)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="dataLength" label="字段长度" width="180">
        <template slot-scope="{ row }">
          <span v-html="brightenKeyword(row.dataLength, listQuery.searchName)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="columnSecurityLevel" label="安全等级" width="180">
        <template slot-scope="{ row }">
          <span v-if="row.columnSecurityLevel == 1">机密</span>
          <span v-else-if="row.columnSecurityLevel == 2">秘密</span>
          <span v-else-if="row.columnSecurityLevel == 3">内部公开</span>
          <span v-else>外部公开</span>
        </template>
      </el-table-column>
      <el-table-column prop="tableComment" label="所属数据模型" width="180">
        <template slot-scope="{ row }">
          <span v-html="brightenKeyword(row.tableComment, listQuery.searchName)"></span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      :page-sizes="pageArray" @pagination="getList(listQuery)" />
  </div>
</template>
<script>
import { queryColumnModel } from '@/api/modelDataApi/index'
import Pagination from '@/components/Pagination/index.vue'

export default {
  props: ['valueprops'],

  components: {
    Pagination,
  },
  data() {
    return {
      currentPage1: 5,
      tableData: [],
      total: 0,

      pageArray: this.$store.getters.pageArray,
      listQuery: {
        searchName: "实时信息",
        page: 1,
        limit: this.$store.getters.defaultPageSize,
      },
    }
  },
  methods: {
    brightenKeyword(val, keyword) {
      const Reg = new RegExp(keyword, 'i')
      if (val) {
        return val.replace(Reg, `<span style="color: red;">${keyword}</span>`)
      }
    },
    refFun(item) {
      this.listQuery.searchName = item
      this.getList(this.listQuery)

    },
    getList(item) {
      queryColumnModel({
        params: item,
      }).then((res) => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
  },
}
</script>
<style scoped></style>
